<template>
	<view class="content">
		<!-- header -->
		<view class="header">
			<view class="header-box">
				<view class="header-box-search" @click="goNav('/pages/index/search/index')">
					<u-icon name="search" color="#666666" size="36"></u-icon>
					<text>搜索服务</text>
				</view>
			</view>
		</view>
		<view class="menu">
			<!-- 左侧菜单 -->
			<view class="menuLeft">
				<scroll-view scroll-y="true" class="menuLeft-scroll">
					<view :class="current==index?'active':''" @click="qeihuan(index,item)" class="menuLeft-scroll-item"
						v-for="(item,index) in tabsList" :key="index">
						{{item.classifyName}}
					</view>
				</scroll-view>
			</view>
			<!-- 右侧内容 -->
			<view class="menuRight">
				<scroll-view scroll-y="true" class="menuRight-scroll" @scrolltolower="reachbottom">
					<view class="menuRight-scroll-item"
						@click="goOrder(item.minOfferMoney,item.money,item.classifyName,item.classifyId)"
						v-for="(item,index) in tabsListRight">
						<view class="menuRight-scroll-item-box">
							<view class="menuRight-scroll-item-box-l">
								<image mode="aspectFill" :src="item.img?item.img: '../../static/logo.png'">
								</image>
							</view>
							<view class="menuRight-scroll-item-box-r">
								{{item.classifyName}}
							</view>
						</view>
					</view>
					<u-loadmore v-if="tabsListRight.length==10" :status="status" :loadmoreText="loadingText"
						:loadingText="loadmoreText" :nomoreText="nomoreText" />
					<empty v-if="tabsListRight.length == 0"></empty>
				</scroll-view>
			</view>
		</view>

	</view>
</template>

<script>
	import rendropdownfilters from '@/components/ren-dropdown-filters/ren-dropdown-filter.vue'
	import empty from '@/components/empty.vue'
	export default {
		components: {
			rendropdownfilters,
			empty
		},
		data() {
			return {
				status: 'loadmore',
				loadingText: '努力加载中',
				loadmoreText: '轻轻上拉',
				nomoreText: '实在没有了',
				current: 0,
				isVip: false,
				tabsList: [],
				arr:[],
				tabsListRight: [],
				// idHome: '',
				token: '',
				classifyId: '',
				classifyTitle: '',
				renwu: ''
			}
		},
		onLoad(option) {
			var that = this;
			that.$Request.getT('/app/common/type/249').then(async res => { //私聊消息通知
				if (res.code == 0) {
					if (res.data && res.data.value) {
						await that.arr.push(res.data.value)
					}
				}
			})
			that.$Request.getT('/app/common/type/236').then(async res => { //退款通知
				if (res.code == 0) {
					if (res.data && res.data.value) {
						await that.arr.push(res.data.value)
					}
				}
			})

			that.$Request.getT('/app/common/type/312').then(async res => { //订单状态通知
				if (res.code == 0) {
					if (res.data && res.data.value) {
						await that.arr.push(res.data.value)
					}
				}
			})
			if (option.renwu) {
				this.renwu = option.renwu
			}
			this.getClassfly();

		},
		onShow() {
			let _this = this
			_this.token = uni.getStorageSync('token')
			_this.userId = uni.getStorageSync('userId') ? uni.getStorageSync('userId') : ''
			if (uni.getStorageSync('token')) {
				_this.getIsVip()
			}
		},
		methods: {
			getIsVip() {
				this.$Request.get("/app/UserVip/isUserVip").then(res => {
					if (res.code == 0) {
						this.isVip = res.data
						uni.setStorageSync('isVIP', res.data)
					}
				});
			},
			//跳转至搜索
			goNav(url) {
				uni.navigateTo({
					url
				})
			},
			//触底
			reachbottom() {
				// uni.showToast({
				// 	title: '已经触底了',
				// 	icon: 'none'
				// })
				//若页面数据等于10则加载下一页
				if (this.tabsListRight.length == 10) {
					this.page += 1
					this.status = 'loading'
					this.getLists(this.gameName, 2)
				} else if (this.tabsListRight.length < 10) {
					this.status = 'nomore'
				}
			},
			// 跳转订单
			goOrder(minOfferMoney, money, classifyName, classifyId) {
				var that = this;
				wx.requestSubscribeMessage({
					tmplIds: that.arr,
					success(re) {
						console.log(JSON.stringify(re),
							'++++++++++++++')
						var datas = JSON.stringify(re);
						if (datas.indexOf("accept") != -1) {
							console.log(re)
							uni.setStorageSync('sendMsg', true)
						}
					},
					fail: (res) => {
						console.log(res)
					}
				})
				let moneys = money;
				if (this.renwu == 1) {
					moneys = money
				} else if (this.renwu == 3) {
					moneys = minOfferMoney
				}
				if (this.token) {
					if (this.renwu == 3) {
						uni.navigateTo({
							url: '/my/publish/xuanShang?money=' + moneys + '&classifyName=' + classifyName +
								'&classifyTitle=' + this.classifyTitle + '&classifyId=' + classifyId
						});
					} else if (this.renwu == 1) {
						uni.navigateTo({
							url: '/my/publish/yiKoujia?money=' + moneys + '&classifyName=' + classifyName +
								'&classifyTitle=' + this.classifyTitle + '&classifyId=' + classifyId
						});
					} else if (this.renwu == 2) {
						uni.navigateTo({
							url: '/my/publish/baojia?classifyName=' + classifyName + '&classifyTitle=' + this
								.classifyTitle + '&classifyId=' + classifyId
						});
					}

				} else {
					uni.navigateTo({
						url: '/pages/public/login'
					});
				}
			},
			// 获取类型
			getClassfly() {
				let _this = this
				this.$Request.get("/app/fixedClassify/getClassifyList?parentId=0").then(res => {
					if (res.code == 0) {
						_this.tabsList = res.data
						_this.classifyTitle = res.data[0].classifyName
						_this.classifyId = res.data[0].classifyId
						_this.getLists()
					}
				});
			},
			//根据类型获取商品
			getLists() {
				let _this = this
				let data = {
					parentId: _this.classifyId
				}
				_this.$Request.get("/app/fixedClassify/getClassifyList", data).then(res => {
					if (res.code == 0) {
						uni.hideLoading()
						_this.tabsListRight = res.data
					}
				});
			},
			// 左侧筛选
			qeihuan(index, item) {
				uni.showLoading({
					title: '加载中'
				})
				this.current = index
				this.classifyId = item.classifyId
				this.classifyTitle = item.classifyName
				this.getLists()
			},

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		// height: calc(100vh - 88rpx);
		height: 100vh;
		background-color: #ffffff;
	}

	.header {
		width: 100%;
		height: 88rpx;
		background-color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;

		.header-box {
			width: 686rpx;
			height: 70rpx;

			.header-box-search {
				width: 100%;
				height: 100%;
				background-color: #F2F2F2;
				display: flex;
				align-items: center;
				padding-left: 30rpx;
				border-radius: 45rpx;

				text {
					margin-left: 20rpx;
					// font-size: 24rpx;
					color: #666666;
				}
			}
		}
	}

	.active {
		font-weight: bold;
		background-color: #ffffff;
	}

	.menu {
		width: 100%;
		height: calc(100vh - 88rpx);
		display: flex;
		margin-top: 20upx;

		.menuLeft {
			// width: 220rpx;
			width: 30%;
			height: 100%;

			.menuLeft-scroll {
				width: 100%;
				height: 100%;
				background-color: #FAFAFA;
			}

			.menuLeft-scroll-item {
				width: 100%;
				height: 92rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #333333;
				font-size: 28rpx;
				font-weight: 500;
			}
		}

		.menuRight {
			// width: 530rpx;
			width: 70%;
			height: 100%;
			position: relative;

			// background-color: yellow;
			.menuRight-search {
				width: 100%;
				height: 92rpx;
				position: absolute;
				top: 0;
			}

			.menuRight-scroll {
				width: 100%;
				height: calc(100% - 92rpx);
				padding: 0upx 30upx;

				.menuRight-scroll-item {
					// width: 100%;
					// height: 240rpx;
					margin-bottom: 20rpx;
					display: inline-flex;
					flex-wrap: wrap;
					margin-right: 12upx;
					margin-top: 20upx;

					.menuRight-scroll-item-box {
						.menuRight-scroll-item-box-l {
							width: 142rpx;
							height: 142rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}

						.menuRight-scroll-item-box-r {
							text-align: center;
							margin-top: 10upx;
						}
					}
				}
			}
		}
	}

	.filter-wrapper {
		width: auto !important;
	}

	.navs {
		background-color: #ffffff !important;
	}
</style>